<template>
  <div>
    <div slot="tip" class="panel panel-default panel-search">
      <el-form :inline="true">
        <el-row>
          <!--       <el-form-item label="部门" prop="departmentId">
            <department-select
              :fnChange="search"
              v-model="page.query.param.departmentId"
              :clearable="true"
            ></department-select>
          </el-form-item>
          <el-form-item label="员工" prop="employeeId">
            <employee-select
              :fnChange="search"
              v-model="page.query.param.employeeId"
              :departmentId="page.query.param.departmentId"
              :clearable="true"
            ></employee-select>
          </el-form-item> -->
          <!--  <el-form-item>
            <el-button type="primary" plain @click="findEmployee"
              >选择员工</el-button
            >
          </el-form-item> -->
          <el-form-item label="周期" prop="periodId">
            <period-select
              :fnChange="buildDataRanges"
              ref="periodSelect"
              v-model="page.query.param.periodId"
              :clearable="true"
            ></period-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              style="width: 305px"
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="来源类型" prop="sourceType">
            <el-select
              style="width: 100%"
              v-model="page.query.param.sourceType"
              @change="search"
            >
              <el-option :key="10" :value="10" :label="'10--打卡'"></el-option>
              <el-option :key="20" :value="20" :label="'20--补卡'"></el-option>
              <el-option :key="30" :value="30" :label="'30--倒入'"></el-option>
              <el-option
                :key="40"
                :value="40"
                :label="'40--模拟卡'"
              ></el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="班次类型" prop="classType">
                        <el-select :clearable="true" v-model="page.query.param.classType" style="width:160px" @change="search">
                            <el-option v-for="item in $dongxwDict.store.CLASS_TYPES" :key="item[0]" :value="item[0]"
                                       :label="item[1]"></el-option>
                        </el-select>
                    </el-form-item> -->

          <el-form-item>
            <el-button type="primary" @click="search" v-keycode="'ENTER'"
              >查询</el-button
            >
            <el-button @click="cancel">取消</el-button>
            <!--<el-button plain @click="exportRecords">导出XLS</el-button>-->

            <!-- <el-button type="primary" plain @click="create">补卡</el-button> -->
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!--<v-toolbar type="alert" style="margin-left:-5px">-->
    <!--&lt;!&ndash;<el-button slot='tip' type="primary" plain @click="create">新增</el-button>&ndash;&gt;-->
    <!--&lt;!&ndash;<el-button plain @click="exportRecords">导出 XLS</el-button>&ndash;&gt;-->
    <!--</v-toolbar>-->
    <div width="50%">
      <!--:click="clickRow"-->

      <v-table
        ref="table"
        :dblclick="edit"
        :page="page"
        :table-minheight="450"
        @dataloaded="onDataloaded"
      >
        <!-- <el-table-column
          prop="status"
          :sortable="true"
          label="状态"
          width="120"
        >
          <template slot-scope="{ row }">
            {{ DICT.STATUS[row.status] }}
          </template>
        </el-table-column> -->
        <el-table-column
          prop="department"
          :sortable="true"
          label="部门"
          width="111"
        >
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.employee.department.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="workID"
          :sortable="true"
          label="工号"
          width="100"
        >
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.employee.workID }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="name" :sortable="true" label="员工" width="100">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.employee.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cardDay"
          :sortable="true"
          label="打卡日期"
          width="100"
        >
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ $dongxwDict.viewDate(row.cardDay) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="week" :sortable="true" label="星期" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.week }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cardTime"
          :sortable="true"
          label="打卡时间"
          width="133"
        >
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.cardTime }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="sCard" :sortable="true" label="补卡" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.sourceType == 20 ? row.sCard : "-" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sourceType"
          :sortable="true"
          label="来源类型"
          width="100"
        >
          <template slot-scope="{ row }">
            {{ DICT.SOURCETYPE[row.sourceType] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="cardSystem"
          :sortable="true"
          label="打卡系统"
          width="112"
        >
          <template slot-scope="{ row }">
            {{ DICT.CARDSYSTEM[row.cardSystem] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="site"
          :sortable="true"
          label="打卡地点"
          width="122"
        >
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.site }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="siteCode"
          :sortable="true"
          label="打卡设备"
          width="122"
        >
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.siteCode }}
            </span>
          </template>
        </el-table-column>
        <!--    <el-table-column width="80" label="操作"  >
          <template slot-scope="scope">
            <el-button type="text" title="编辑" @click="edit(scope.row)">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button
              type="text"
              @click="del(scope.row, scope.$index)"
              title="删除"
            >
              <span style="color: red">
                <i class="el-icon-delete red"></i
              ></span>
            </el-button>
          </template>
        </el-table-column> -->
      </v-table>
    </div>
    <v-dialog ref="formDiag" :width="'720px'" title="信息编辑">
      <form-panel @saved="onFormSaved"></form-panel>
      <div slot="footer">
        <el-button type="primary" @click="$refs.formDiag.dispatch('submit')"
          >保存</el-button
        >
        <el-button
          type="default"
          @click="
            () => {
              $refs.formDiag.hide();
            }
          "
          >取消</el-button
        >
      </div>
    </v-dialog>

    <v-dialog
      ref="formFindDiag"
      :appendToBody="true"
      title="查找"
      :width="'48%'"
    >
      <employee-multi-select
        v-model="page.query.param.employeeId"
        :confirmFind="confirmFind"
        :cancelFind="cancelFind"
      >
        <!--<el-button type="primary" @click="$refs.formDiag.dispatch('submit')">确定</el-button>-->
        <!--<el-button type="default" @click="()=>{$refs.formDiag.hide();}">取消</el-button>-->
      </employee-multi-select>
    </v-dialog>
    <v-dialog ref="formMakeDiag" :width="'720px'" title="排班">
      <make-form-panel @saved="onMakeFormSaved"></make-form-panel>
      <div slot="footer">
        <el-button type="primary" @click="$refs.formMakeDiag.dispatch('submit')"
          >排 班</el-button
        >
        <el-button
          type="default"
          @click="
            () => {
              $refs.formMakeDiag.hide();
              $nextTick(search);
            }
          "
          >关闭</el-button
        >
      </div>
    </v-dialog>
  </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.status_green {
  color: green;
}
</style>

<script>
import PeriodSelect from "@/components/widgets/attend/PeriodSelect.vue";
import ClassMasterSelect from "@/components/widgets/attend/ClassMasterSelect.vue";

import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
import EmployeeSelect from "@/components/widgets/hr/EmployeeSelect.vue";

import FormPanel from "./Form";
import MakeFormPanel from "./MakeForm";
import EmployeeMultiSelect from "@/components/widgets/hr/EmployeeMultiSelect.vue";

export default {
  components: {
    EmployeeMultiSelect,
    EmployeeSelect,
    ClassMasterSelect,
    PeriodSelect,
    FormPanel,
    MakeFormPanel,
    DepartmentSelect,
  },
  props: {
    fatherMethodShowSub: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      DICT: {
        STATUS: {
          10: "草稿",
          20: "审核中",
          30: "审核不过",
          40: "审核不过终止",
          50: "审核通过",
        },
        SOURCETYPE: {
          10: "打卡",
          20: "补卡",
          30: "倒入",
          40: "模拟卡",
        },
        CARDSYSTEM: {
          10: "本系统",
          20: "钉钉倒入",
          30: "企业微信",
          40: "打卡数据同步",
        },
      },
      dateRange: [],
      formStatus: 1,
      summaryMap: {},

      page: {
        query: {
          orderBys: "departmentId|asc,employeeId|asc,createdAt|desc",
          param: {
            name: "",
            sourceType:20,
            isDeleted: false,
          },
        },
        getData: this.$api.attend.member.EmployeeCardService.query,
      },
      tableActions: [
        {
          name: "编辑",
          handle: this.edit,
        },
        {
          name: "删除",
          handle: this.del,
          style: "color:red",
        },
      ],
    };
  },
  computed: {},

  methods: {
    findEmployee() {
      this.$refs.formFindDiag.show();
    },

    confirmFind(row) {
      this.$refs.formFindDiag.hide();
      this.page.query.param.employeeId = row.id;
      this.search();
    },
    cancelFind() {
      this.$refs.formFindDiag.hide();
    },

    onDataloaded(rsp) {},
    /*
            导出
             */
    exportRecords() {
      let params = _.cloneDeep(this.getSearchParams());
      params.param.parentId = null;
      this.$api.attend.attend.EmployeeCardService.export(params);
    },

    create() {
      this.$refs.formDiag.show({
        departmentId: this.page.query.param.departmentId,
      });
    },
    createMake() {
      this.$refs.formMakeDiag.show({
        departmentId: this.page.query.param.departmentId,
      });
    },
    edit(row) {
      this.$refs.formDiag.show({ cardId: row.cardId });
    },

    del(row) {
      this.$confirm("确定删除此记录吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.attend.attend.EmployeeCardService.deleteById(row.cardId).then(
          (rsp) => {
            this.search();
            this.$msgJsonResult(rsp);
          }
        );
      });
    },

    onMakeFormSaved() {
      this.$refs.formMakeDiag.hide();
      this.$nextTick(this.search);
    },

    onFormSaved() {
      this.$refs.formDiag.hide();
      this.$nextTick(this.search);
    },
    init(options = {}) {
      if (options.cardId) {
        this.cardId = options.cardId;
      }
      this.search();
    },
    getSearchParams() {
      this.page.query.dateRanges = {};
      if (this.dateRange && this.dateRange.length > 0) {
        this.page.query.dateRanges["cardDay"] = {
          startDate: this.dateRange[0],
          endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
        };
      }
      return this.page.query;
    },

    buildDataRanges() {
      if (this.page.query.param.periodId != null) {
        this.$api.attend.attend.PeriodService.findById(
          this.page.query.param.periodId
        ).then((r) => {
          //console.log(JSON.stringify(r));
          if (r.data != null) {
            this.dateRange = [r.data.startDay, r.data.endDay];
            this.getSearchParams();
            //  console.log(JSON.stringify(this.page.query));
            this.$refs.table.load();
            return;
          }
        });
      }
    },
    search() {
      this.getSearchParams();
      //  console.log(JSON.stringify(this.page.query));
      this.$refs.table.load();
      //this.$refs.tablesub.load();
    },
    cancel() {
      this.dateRange = [];

      this.page.query.param = {
        isDeleted: false,
      };
      this.search();
    },

    clickRow(row) {
      this.row = row;
      // console.log(JSON.stringify(row));
      if (this.fatherMethodShowSub) {
        this.fatherMethodShowSub(row);
      }
    },
  },

  created() {},
  mounted() {
    this.$on("init", this.init);
  },
};
</script>
